<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100%;
            height: 100%;
        }

        #bd1 {
            width: 100%;
            background-color: #313131;
            height: 50px;
        }

        #bd1>ul {
            width: 1300px;
            margin: 0 auto;
            height: 50px;
            overflow: hidden;
        }

        #bd1>ul>li {
            float: left;
            text-align: center;
            line-height: 50px;
            color: #ffffff;
            font-weight: 300;
            cursor: pointer;
            margin: 0 10px 0 0;
        }

        .bd1li {
            position: relative;
            left: 500px;
        }

        #bd2 {
            width: 1300px;
            height: 100px;
            margin: 10px auto 10px auto;

            background: url("https://picsum.photos/100/100?random=1") no-repeat 0 0;
        }

        #bd2>ul {
            margin-left: 450px;
        }

        #bd2>ul>li {
            float: left;
            cursor: pointer;
            color: black;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            margin: 0 24px 0 24px;
        }

        #bd3 {
            width: 1300px;
            height: 600px;
            box-sizing: border-box;
            /* border: 1px solid black; */
            margin: 0 auto;
            background: url("https://picsum.photos/1300/600?random=1");
            cursor: pointer;
        }

        #bd3>ul {
            width: 400px;
            height: 600px;
            box-sizing: border-box;
            /* border: 1px solid black; */
            background-color: rgb(101, 101, 101, 0.5);

        }

        #bd3>ul>li {
            margin: 40px 0 1px 12px;
            color: #ffffff;
            cursor: pointer;
        }

        #bd3>ul span {
            float: right;
            margin-right: 25px;
        }

        #bd4 {
            width: 1300px;
            height: 200px;
            background-color: antiquewhite;
            margin: 0 auto;
            margin-top: 10px;
        }

        #bd4>div {
            width: 340px;
            height: 200px;
            box-sizing: border-box;
            /* border: 1px solid black; */
            float: left;
            margin: 0 0 0 13px;
        }

        #bd4d {
            width: 240px !important;
            height: 200px !important;
        }

        #bd4>div:nth-child(1) {
            margin-left: 0;
        }

        #bd4>div:nth-child(2) {
            margin-right: 0;
        }

        #bd5 {
            width: 1300px;
            height: 400px;
            /* background-color: #313131; */
            margin: 0 auto;
            margin-top: 20px;
            overflow: hidden;
        }

        #bd5>div {
            float: left;
            width: 250px;
            height: 300px;
            background-color: #f6f6f6;
            box-sizing: border-box;
            /* border: 1px solid black; */
            margin-left: 10px;
        }

        #bd5>div>img {
            display: block;
            margin: 20px auto 40px auto;
        }

        #bd5p {
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .bd5p1 {
            font-size: 16px;
            font-weight: 400;
            text-align: center;
        }

        .bd5p2 {
            font-size: 14px;
            color: #9c9c9c;
            text-align: center;
        }

        #bd6 {
            width: 100%;
            background-color: #e7e7e7;
            height: 350px;
        }
        #bd6d{
            height: 350px;
            /* background-color: #e17a7a; */
            width: 1300px;
            margin: 0 auto;
        }
        #bd6d>div{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            float: left;
            /* border: 1px solid black; */
            margin: 20px 0 0 20.5px;
        }
        #bd6p{
            font-size: 20px;
            font-weight: 300;
        }
        #bd6p>span{
            font-size: 16px;
            float: right;
            /* margin-right: ; */
        }
        #bd6 img{
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="bd1">
            <ul>
                <li>小米网</li>
                <li>MIUI</li>
                <li>米聊</li>
                <li>游戏</li>
                <li>多看阅读</li>
                <li>云服务</li>
                <li>小米移动版</li>
                <li>问题反馈</li>
                <li>selct Region</li>
                <li class="bd1li">登录</li>
                <li class="bd1li">出册</li>
            </ul>
        </div>
        <div id="bd2">
            <ul>
                <li>小米手机</li>
                <li>红米</li>
                <li>平板</li>
                <li>电视.盒子</li>
                <li>路由器</li>
                <li>智能硬件</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
        </div>
        <div id="bd3">
            <ul>
                <li>手机 平板<span>&gt;</span></li>
                <li>电视 盒子<span>&gt;</span></li>
                <li>路由器 智能硬件<span>&gt;</span></li>
                <li>移动电源 插线板<span>&gt;</span></li>
                <li>耳机 音箱<span>&gt;</span></li>
                <li>电池 存储卡<span>&gt;</span></li>
                <li>保护套 后盖<span>&gt;</span></li>
                <li>贴膜 其他配件<span>&gt;</span></li>
                <li>米兔 服装<span>&gt;</span></li>
                <li>背包 其他周边<span>&gt;</span></li>
            </ul>
        </div>
        <div id="bd4">
            <div id="bd4d"><img src="https://picsum.photos/240/200?random=1"></div>
            <div><img src="https://picsum.photos/340/200?random=2"></div>
            <div><img src="https://picsum.photos/340/200?random=3"></div>
            <div><img src="https://picsum.photos/340/200?random=4"></div>
        </div>
        <div id="bd5">
            <p id="bd5p">小米明星单品</p>
            <div>
                <img src="https://picsum.photos/200/150?random=4">
                <p class="bd5p1">兄奥秘啊发嘀咕</p>
                <p class="bd5p2">爱国garb很多国内的共同难题</p>
            </div>
            <div>
                <img src="https://picsum.photos/200/150?random=6">
                <p class="bd5p1">兄奥秘啊发嘀咕</p>
                <p class="bd5p2">爱国garb很多国内的共同难题</p>
            </div>
            <div> <img src="https://picsum.photos/200/150?random=5">
                <p class="bd5p1">兄奥秘啊发嘀咕</p>
                <p class="bd5p2"></p>
            </div>
            <div> <img src="https://picsum.photos/200/150?random=3">
                <p class="bd5p1">兄奥秘啊发嘀咕</p>
                <p class="bd5p2">爱国garb很多国内的共同难题</p>
            </div>
            <div> <img src="https://picsum.photos/200/150?random=2">
                <p class="bd5p1">兄奥秘啊发嘀咕</p>
                <p class="bd5p2">爱国garb很多国内的共同难题</p>
            </div>
        </div>
        <div id="bd6">
            <div id="bd6d">
                <p id="bd6p">视频<span>查看全部</span></p>
                <div>
                    <img src="https://picsum.photos/240/180?random=4">
                    <p class="bd5p1">兄奥秘啊发嘀咕</p>
                    <p class="bd5p2">爱国garb很多国内的共同难题</p>
                </div>
                <div>
                    <img src="https://picsum.photos/240/180?random=3">
                    <p class="bd5p1">兄奥秘啊发嘀咕</p>
                    <p class="bd5p2">爱国garb很多国内的共同难题</p>
                </div>
                <div>
                    <img src="https://picsum.photos/240/180?random=2">
                    <p class="bd5p1">兄奥秘啊发嘀咕</p>
                    <p class="bd5p2">爱国garb很多国内的共同难题</p>
                </div>
                <div>
                    <img src="https://picsum.photos/240/180?random=1">
                    <p class="bd5p1">兄奥秘啊发嘀咕</p>
                    <p class="bd5p2">爱国garb很多国内的共同难题</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>